<template>
  <div id="login">
    <div id="title">学生工作管理系统</div>
    <div id="title2">登录</div>
    <div id="form">
    <el-row>
      <el-col :span="2"><i class="el-icon-user-solid" style="width:40;height: 48;font-size: 40px;"></i></el-col>
      <el-col :span="22"> <el-input v-model="username" placeholder="请输入用户名" style="width: 326px;height:48px"></el-input></el-col>
    </el-row>
    <el-row>
      <el-col :span="2"><i class="el-icon-lock" style="width:40;height: 48;font-size: 40px;"></i></el-col>
      <el-col :span="22"> <el-input placeholder="请输入密码" v-model="password" show-password style="width: 326px;height:48px"></el-input></el-col>
    </el-row>
    </div>
    <div id="kuang">
      <el-checkbox v-model="checked">自动登录</el-checkbox>
    </div>
    <div  id="register" @click="register">注册</div>
    <div id="forget" @click="forget">忘记密码？</div>
    <el-button type="primary" id="logo" @click="handle">登录</el-button>
    <div id="abc">登录代表您已经阅读并同意<a href="">服务条款</a></div>
  </div>
</template>
<script>
import axios from 'axios'
  export default {
    data() {
      return {
        username: '',
        password: '',
        checked: true
      }
    },
    methods: {
        handle(){
          //提交账号密码进行登录
          //传出：username 用户名 password 密码
          //传入： type string类型 权限（1老师，2学生，3管理员） success boolean类型，true表示成功登录  ID 对应账号的ID
            axios.post('http://127.0.0.1:4523/m2/5591894-5270100-default/244177612?apifoxApiId=244177612',{//后端请求路径
              username:this.username,
              password:this.password
            }).then(res=>{
              if(res.data.success){
                this.$store.commit('setLogin',1)
                if(res.data.type==1){//根据后端数据判断登录
                  this.$router.push('/TeaHome')//教师
                  this.$store.commit('setType','教师')
                  this.$store.commit('setId',res.data.id)
                }else if(res.data.type==2){
                  this.$router.push('/StuHome')//学生
                  this.$store.commit('setType','学生')
                  this.$store.commit('setId',res.data.id)
                }else if(res.data.type==3){
                  this.$store.commit('setId',res.data.id)
                  this.$store.commit('setType','管理员')
                  this.$router.push('/AdminPage')//管理员
                }
              }
            })
        },
        register(){
          this.$router.push('/register');
        },
        forget(){
          this.$router.push('./alter');
        }
    }
  }
</script>
<style>
  #login{
    width: 457px;
    height: 563px;
    background-color: rgb(246, 244, 244,0.3);
    border: 1px solid;
    padding: 40px;
    margin: 0 auto;
    position:absolute;
    top: 70px;
    left:500px;
  }
  #title{
    font-size: 30px;
    font-weight: 500;
  }
  #title2{
    font-size: 20px;
    color: rgb(11, 123, 123);
    text-align:left;
    position:absolute;
    top:200px;
    left:90px;
  }
  #form{
    position:absolute;
    top:250px;
    left:90px;
  }
  #kuang{
    position:absolute;
    top: 400px;
    left:90px;
  }
  #register{
    color:rgb(8, 105, 105);
    position:absolute;
    top:400px;
    left:400px;
  }
  #forget{
    position:absolute;
    top:450px;
    left:90px;
    color:rgb(8, 105, 105);
  }
  #logo{
    position:absolute;
    top:450px;
    left:300px;
    width:140px;
    height: 40px;
  }
  #abc{
    position:absolute;
    top:530px;
    left:130px;
  }
  
</style>
